<template>
  <div class="video-test-container">
    <h2>视频播放器测试</h2>
    
    <div class="test-player">
      <VideoPlayer
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        :autoplay="false"
        :muted="false"
      />
    </div>
    
    <div class="controls">
      <el-button @click="changeVideo">切换视频</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VideoPlayer from '@/components/VideoPlayer.vue';

const currentVideoIndex = ref(0);
const testVideos = [
  'https://www.w3schools.com/html/mov_bbb.mp4',
  'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4'
];

const changeVideo = () => {
  currentVideoIndex.value = (currentVideoIndex.value + 1) % testVideos.length;
};
</script>

<style lang="less" scoped>
.video-test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  
  h2 {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .test-player {
    margin-bottom: 20px;
  }
  
  .controls {
    text-align: center;
  }
}
</style>
